
$(function () {


  // ********************************************************加载列表
  function getList() {
    $.ajax({
      type: "GET",
      url: "admin/links",
      success: function (res) {
        if (res.status == 0) {
          let str = "";
          res.data.forEach(item => {
            str += `
            <tr>
              <td>${item.id}</td>
              <td>
                <div class="bg">
                  <img src="http://127.0.0.1:8888/uploads/${item.linkicon}">
                </div>
              </td>
              <td>${item.linkname}</td>
              <td>${item.linkurl}</td>
              <td>${item.linkdesc}</td>
              <td>
                <button type="button" class="layui-btn layui-btn-xs edit" edit_id=${item.id}>
              编辑
            </button>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" del_id=${item.id}>
              删除
            </button>
              </td>
            </tr>
            `;
          });
          $("tbody").html(str);
        }
      }
    });
  }
  getList();



  // *********************************************************删除友情链接


  // **********************************************************编辑友情链接
  let edit_str = `<form id="edit-form" lay-filter='editForm' class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input name">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input url">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input describe">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;
  // 因为是动态创建的标签 使用事件委托注册事件
  $('tbody').on('click', '.edit', function () {
    // 获取自定义属性
    let id = $(this).attr('edit_id')
    console.log(id);
    // 发送请求查询友情链接详情
    $.ajax({
      type: 'get',
      url: `admin/links/${id}`,
      success: function (res) {
        if (res.status == 0) {
          // layui弹出层  编辑弹层
          layer.open({
            title: '编辑友情链接',
            content: edit_str,
            area: ['500px', '350px'],
            btn: false,
            success: function () {
              // 回填数据
              $('.name').val(res.data.linkname);
              $('.url').val(res.data.linkurl)
              $('.describe').val(res.data.linkdesc)
              // 动态显示图片
              $('#preIcon').attr('src', `http://127.0.0.1:8888/uploads/${res.data.linkicon}`)
              // 修改弹层提交后台
              // 点击提交发送请求 提交数据
              $('#edit-form').on('submit', function (e) {
                // 获取上传的文件
                let formData = new FormData(this)
                // 阻止默认提交
                e.preventDefault();
                $.ajax({
                  type: 'PUT',
                  url: `admin/links/${id}`,
                  // data: {
                  //   linkname,
                  //   linkicon,
                  //   linkdesc,
                  //   linkurl
                  // },
                  data: formData,
                  // 默认情况下，processData 的值是 true，其代表以对象的形式上传的数据都会被转换为字符串的形式上传。
                  // 而当上传文件的时候，则不需要把其转换为字符串，因此要改成false
                  processData: false,
                  // 发送数据的格式  false 就会改掉之前默认的数据格式，在上传文件时就不会报错了
                  contentType: false,
                  success: function (res) {
                    console.log(res);
                    if (res.status == 0) {
                      // 给用户提示信息
                      layer.msg(res.message)
                      // 重新渲染
                      getList()
                    } else {
                      // console.log(11);
                      // 给用户提示信息
                      layer.msg(res.message)
                    }
                  }
                })
              })
            }
          })
          // 上传文件
          $("#urlIcon").on("click", function () {
            $("#linkFile").click();
          })
        } else {
          // 请求数据错误给用户提示
          layer.msg(res.message)
        }
      }
    })

  })


  // *********************************************************添加友情链接
  let add_str = `
  <form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`

  $("#add-link").click(function () {


    // 弹窗：非常常用知识！
    layer.open({
      type: 1, // 页面层，弹窗内部设置一些页面结构 HTML结构！
      title: '添加类别', // 左上角显示标题
      area: ['500px', '250px'], // area区域：弹窗宽和高！
      content: add_str, // content:内容？弹窗的内容！HTML结构字符串！

      // 当弹窗弹出成功时调用这个函数：
      success: function (dom, index) {
        // dom 弹窗dom节点！
        // index:弹窗标识；
        // 提交事件： 弹窗成功后：在此函数内部可以获取 form表单元素
        addSub(index);
      }
    });

    $("#urlIcon").on("click", function () {

      $("#linkFile").click();

    })

  });



  // 3.点击弹窗内确认执行提交：
  function addSub(numb) {

    $("#add-form").on("submit", function (e) {
      e.preventDefault();

      // 1.收集数据
      let formData = new FormData(this)
      // 2.ajax提交

      $.ajax({
        url: "admin/links",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (res) {
          layer.msg(res.message);
          if (res.status == 0) {
            // 再次调用列表接口：
            getList();

            // 关闭弹窗：
            layer.close(numb);
          }
        }
      })

    });
  }

  $("tbody").on("click", ".delete", function (e) {

    //  2.获取对应删除数据id值；
    //     2.1 回到初始化渲染，删除和id绑定在一起！
    //     2.2 自定义属性获取，
    let id = $(this).attr("del_id");

    // console.log(id);

    //  3.删除对应数据 看接口文档  /my/article/deletecate/:id 动态接口
    $.ajax({
      url: "admin/links/" + id,
      type: "DELETE",

      success: function (res) {
        layer.msg(res.message);
        if (res.status == 0) {
          getList();
        }
      }
    });
  });
})